<script setup>
import { ref } from 'vue'
const inputRef = ref()
const input = ref('')
const handleInput = text => {
  console.log(text, input.value)
}
const handleBlur = () => {
  inputRef.value.blur()
  inputRef.value.clear()
}
</script>

<template>
  <div>
    <h1 class="row-title">普通使用</h1>
    <div class="row">
      <lee-input
        v-model="input"
        style="width: 400px"
        placeholder="请输入"
        @input="handleInput"
        clearable
      ></lee-input>
      <lee-input
        v-model="input"
        disabled
        placeholder="Please input"
      ></lee-input>
    </div>
    <h1 class="row-title">带有密码的密码框</h1>
    <div class="row">
      <lee-input
        v-model="input"
        type="password"
        style="width: 500px"
        placeholder="Please input"
        @input="handleInput"
        show-password
      ></lee-input>
    </div>
    <h1 class="row-title">带图标的输入框</h1>
    <div class="row">
      <lee-input
        v-model="input"
        style="width: 500px"
        placeholder="请输入"
        prefixIcon="star"
      ></lee-input>
      <lee-input
        v-model="input"
        style="width: 500px"
        placeholder="请输入"
        suffixIcon="star"
      ></lee-input>
    </div>
    <h1 class="row-title">文本域输入框</h1>
    <div class="row">
      <lee-input
        v-model="input"
        style="width: 500px"
        placeholder="请输入"
        type="textarea"
        :rows="2"
      ></lee-input>
    </div>
    <h1 class="row-title">设置尺寸大小</h1>
    <div class="row">
      <lee-input
        v-model="input"
        style="width: 500px"
        placeholder="默认"
      ></lee-input>
      <lee-input
        v-model="input"
        style="width: 500px"
        placeholder="请输入"
        size="large"
      ></lee-input>
      <lee-input
        v-model="input"
        style="width: 500px"
        placeholder="请输入"
        size="small"
      ></lee-input>
    </div>
    <h1 class="row-title">手动清除</h1>
    <div class="row">
      <lee-input ref="inputRef" v-model="input" placeholder="默认"></lee-input>
      <lee-button type="primary" @click="handleBlur">清除</lee-button>
    </div>
  </div>
</template>

<style scoped>
.row {
  width: 500px;
}
</style>
